<template>
  <el-row>
    <el-row type="flex" align="middle">
      <div class="projectIndexTitle">
        <div class="projectIndexSquare"></div>
        <span class="projectIndexInfo">统计类型：</span>
        <el-radio-group v-model="redioGroup" :max="1" size="mini" @change="redioGroupChange">
          <el-radio-button class="indexRadioButton" label="projectCount">项目数量</el-radio-button>
          <el-radio-button class="indexRadioButton" label="projectQueryView">项目进度</el-radio-button>
        </el-radio-group>
      </div>
      <!-- <el-col :span="4" style="text-align: center;font-size:14px">统计类型：</el-col>
      <el-col :span="18">
        <el-radio-group v-model="redioGroup" :max="1" size="medium" fill="#00A96E" @change="redioGroupChange">
          <el-radio-button label="projectCount">项目数量</el-radio-button>
          <el-radio-button label="projectQueryView">项目进度</el-radio-button>
        </el-radio-group>
      </el-col> -->
      <el-col :span="2">
        <!-- <component-Setting :id="recordId" :position="'3'"></component-Setting> -->
      </el-col>
    </el-row>
    <!-- <div :style="{height:clientHeight*0.75+'px',width:'100%',overflow:'scroll','overflow-x':'hidden'}" v-if="projectCountView">
      <div id="echartsBar" :style="{'height':echartsBarHeight}" v-if=" projectCountView">
      </div>
    </div> -->
    <el-row>
      <div :style="{ 'min-height': '485px', height: 'calc(71vh - 48px)', width: '100%' }" v-if="projectCountView">
        <div id="echartsBar" :style="{ 'min-height': '485px', height: echartsBarHeight }" v-if="projectCountView"></div>
      </div>
      <mpm-project-query ref="projectList" v-if="projectQueryView"></mpm-project-query>
    </el-row>
  </el-row>
</template>

<script>
import store from '@tapui/store'
import { getAction } from '@tapui/utils/http'
import echarts from 'echarts'
import componentSetting from './componentSetting'
import mpmProjectQuery from './indexQuery'
export default {
  name: 'projectTypeAndProgress',
  components: { componentSetting, mpmProjectQuery },
  data() {
    return {
      redioGroup: 'projectCount',
      projectQueryView: false,
      projectCountView: true,
      queryParam: {},
      clientHeight: Number,
      echartsBarHeight: ''
    }
  },
  props: {
    recordId: Number
  },
  methods: {
    // 刷新数据
    doQueryForAll(param) {
      this.queryParam = param
      if (this.$refs.projectList && this.projectQueryView) {
        this.$refs.projectList.queryParam = param
        this.$refs.projectList.loadData()
      } else if (this.projectCountView) {
        this.setProjectCountBar(param)
      }
    },
    // 切换组件
    redioGroupChange(selectItem) {
      if (selectItem === 'projectCount') {
        this.projectQueryView = false
        this.projectCountView = true
        this.setProjectCountBar()
      } else if (selectItem === 'projectQueryView') {
        this.projectQueryView = true
        this.projectCountView = false
        // this.$refs.projectList.queryParam = this.queryParam
      }
    },
    // 各级别项目数量堆叠柱状图
    setProjectCountBar(params) {
      getAction('/mpm/mpmIndex/queryProvincesProjectLevelsCountInfo', this.queryParam).then((res) => {
        /* var echartsBarHeightNumber = 20 * res.result.categoryList.length */
        this.echartsBarHeight = 'calc(71vh - 48px)'

        this.$nextTick(() => {
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: function(params, ticket, callback) {
                var lipStr = ''
                var totalNumber = 0
                for (let item of params) {
                  totalNumber = totalNumber + Number.parseInt(item.value)
                  lipStr = lipStr + item.seriesName + ':  ' + item.value + '<br/>'
                }
                lipStr = params[0].name + ':  共' + totalNumber + '个<br/>' + lipStr
                return lipStr
              }
            },
            legend: {
              // data: ['A', 'B', 'C', 'D'],
              right: '3%',
              top: '0%'
            },
            grid: {
              left: '3%',
              right: '6%',
              bottom: '3%',
              top: '4%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              minInterval: 1,
              splitLine: {
                show: false
              }
            },
            yAxis: {
              type: 'category',
              data: res.result.categoryList,
              inverse: true
            },
            dataZoom: [
              {
                id: 'dataZoomInsideY',
                type: 'inside',
                yAxisIndex: [0],
                filterMode: 'empty',
                startValue: 0,
                endValue: 9
              },
              {
                id: 'dataZoomY',
                type: 'slider',
                show: res.result.categoryList.length > 10,
                startValue: 0,
                endValue: 9,
                yAxisIndex: [0],
                filterMode: 'filter',
                width: '20',
                showDetail: false,
                right: '2%',
                top: '6%',
                bottom: '8%'
              }
            ],
            series: [
              {
                name: 'A',
                type: 'bar',
                stack: '总量',
                barWidth: 30,
                barGap: 30,
                label: {
                  show: true,
                  position: 'insideRight',
                  formatter: (params) => {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  }
                },
                itemStyle: {
                  color: '#FF3399'
                },
                data: res.result.ACountList
              },
              {
                name: 'B',
                type: 'bar',
                stack: '总量',
                barWidth: 30,
                barGap: 20,
                label: {
                  show: true,
                  position: 'insideRight',
                  formatter: (params) => {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  }
                },
                itemStyle: {
                  color: '#FFAE8B'
                },
                data: res.result.BCountList
              },
              {
                name: 'C',
                type: 'bar',
                stack: '总量',
                barWidth: 30,
                barGap: 20,
                label: {
                  show: true,
                  position: 'insideRight',
                  formatter: (params) => {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  }
                },
                itemStyle: {
                  color: '#3399FF'
                },
                data: res.result.CCountList
              },
              {
                name: 'D',
                type: 'bar',
                stack: '总量',
                barWidth: 30,
                barGap: 20,
                label: {
                  show: true,
                  position: 'insideRight',
                  formatter: (params) => {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  }
                },
                itemStyle: {
                  color: 'rgb(147,247,249)'
                },
                data: res.result.DCountList
              }
            ]
          }
          var echartsBar = echarts.init(document.getElementById('echartsBar'))
          echartsBar.setOption(option, true)
          echartsBar.resize()
        })
      })

      // window.onresize = echartsBar.resize
    }
  },
  created() {},
  mounted() {
    this.setProjectCountBar()
  },
  beforeMount() {
    this.clientHeight = document.body.clientHeight
  },
  beforeDestroy() {}
}
</script>
<style lang="scss" scoped></style>
